<template>
  <div class="min-h-screen py-8 px-4 sm:px-6 lg:px-8">
    <div class="max-w-6xl mx-auto">
      <!-- 页面标题 -->
      <div class="text-center mb-12">
        <h1 class="text-4xl font-bold mb-4 tech-text">Document Picture-in-Picture API</h1>
        <p class="text-gray-300 text-lg">
          创建始终在最上层的浮动窗口，显示任意 HTML 内容
        </p>
      </div>

      <!-- 浏览器支持提示 -->
      <div v-if="!isSupported" class="tech-card mb-8 border-yellow-600">
        <div class="flex items-center mb-4">
          <i class="i-carbon-warning text-yellow-500 text-xl mr-3"></i>
          <h3 class="text-xl font-semibold text-yellow-500">浏览器支持提示</h3>
        </div>
        <p class="text-gray-300 mb-4">
          您的浏览器不支持 Document Picture-in-Picture API。此功能需要 Chrome 116+ 或其他支持该 API 的浏览器。
        </p>
        <p class="text-gray-400 text-sm">
          注意：这是一个实验性 API，可能需要启用实验性功能标志。
        </p>
      </div>

      <!-- PiP 状态 -->
      <div class="tech-card mb-8">
        <h2 class="text-2xl font-semibold mb-6 text-white">画中画状态</h2>
        
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
          <div class="bg-gray-800 rounded-lg p-4">
            <div class="text-gray-400 text-sm mb-1">窗口状态</div>
            <div class="text-white text-xl font-semibold">
              {{ pipWindow ? '已打开' : '未打开' }}
            </div>
          </div>

          <div class="bg-gray-800 rounded-lg p-4">
            <div class="text-gray-400 text-sm mb-1">窗口宽度</div>
            <div class="text-white text-xl font-semibold">
              {{ windowSize.width }}px
            </div>
          </div>

          <div class="bg-gray-800 rounded-lg p-4">
            <div class="text-gray-400 text-sm mb-1">窗口高度</div>
            <div class="text-white text-xl font-semibold">
              {{ windowSize.height }}px
            </div>
          </div>

          <div class="bg-gray-800 rounded-lg p-4">
            <div class="text-gray-400 text-sm mb-1">活动时长</div>
            <div class="text-white text-xl font-semibold">
              {{ activeTime }}s
            </div>
          </div>
        </div>

        <div class="flex gap-3">
          <button
            v-if="!pipWindow"
            @click="openPiP('default')"
            :disabled="!isSupported"
            class="tech-button disabled:opacity-50 disabled:cursor-not-allowed"
          >
            <i class="i-carbon-popup mr-2"></i>
            打开画中画窗口
          </button>
          <button
            v-else
            @click="closePiP"
            class="bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-lg transition-colors"
          >
            <i class="i-carbon-close mr-2"></i>
            关闭画中画窗口
          </button>
        </div>
      </div>

      <!-- 示例模板 -->
      <div class="tech-card mb-8">
        <h2 class="text-2xl font-semibold mb-6 text-white">示例模板</h2>
        <p class="text-gray-300 mb-6">选择一个模板在画中画窗口中显示</p>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          <button
            @click="openPiP('video')"
            :disabled="!isSupported || !!pipWindow"
            class="bg-gray-800 hover:bg-gray-700 text-white p-6 rounded-lg transition-colors text-left disabled:opacity-50 disabled:cursor-not-allowed"
          >
            <i class="i-carbon-video text-3xl text-blue-400 mb-3 block"></i>
            <div class="text-lg font-semibold mb-2">视频播放器</div>
            <div class="text-gray-400 text-sm">在浮动窗口中播放视频</div>
          </button>

          <button
            @click="openPiP('music')"
            :disabled="!isSupported || !!pipWindow"
            class="bg-gray-800 hover:bg-gray-700 text-white p-6 rounded-lg transition-colors text-left disabled:opacity-50 disabled:cursor-not-allowed"
          >
            <i class="i-carbon-music text-3xl text-green-400 mb-3 block"></i>
            <div class="text-lg font-semibold mb-2">音乐播放器</div>
            <div class="text-gray-400 text-sm">浮动音乐控制面板</div>
          </button>

          <button
            @click="openPiP('timer')"
            :disabled="!isSupported || !!pipWindow"
            class="bg-gray-800 hover:bg-gray-700 text-white p-6 rounded-lg transition-colors text-left disabled:opacity-50 disabled:cursor-not-allowed"
          >
            <i class="i-carbon-time text-3xl text-yellow-400 mb-3 block"></i>
            <div class="text-lg font-semibold mb-2">倒计时器</div>
            <div class="text-gray-400 text-sm">浮动倒计时显示</div>
          </button>

          <button
            @click="openPiP('notes')"
            :disabled="!isSupported || !!pipWindow"
            class="bg-gray-800 hover:bg-gray-700 text-white p-6 rounded-lg transition-colors text-left disabled:opacity-50 disabled:cursor-not-allowed"
          >
            <i class="i-carbon-notebook text-3xl text-purple-400 mb-3 block"></i>
            <div class="text-lg font-semibold mb-2">便签</div>
            <div class="text-gray-400 text-sm">浮动记事本</div>
          </button>

          <button
            @click="openPiP('calculator')"
            :disabled="!isSupported || !!pipWindow"
            class="bg-gray-800 hover:bg-gray-700 text-white p-6 rounded-lg transition-colors text-left disabled:opacity-50 disabled:cursor-not-allowed"
          >
            <i class="i-carbon-calculator text-3xl text-orange-400 mb-3 block"></i>
            <div class="text-lg font-semibold mb-2">计算器</div>
            <div class="text-gray-400 text-sm">浮动计算器工具</div>
          </button>

          <button
            @click="openPiP('chat')"
            :disabled="!isSupported || !!pipWindow"
            class="bg-gray-800 hover:bg-gray-700 text-white p-6 rounded-lg transition-colors text-left disabled:opacity-50 disabled:cursor-not-allowed"
          >
            <i class="i-carbon-chat text-3xl text-red-400 mb-3 block"></i>
            <div class="text-lg font-semibold mb-2">聊天窗口</div>
            <div class="text-gray-400 text-sm">浮动聊天界面</div>
          </button>
        </div>
      </div>

      <!-- 自定义内容 -->
      <div class="tech-card mb-8">
        <h2 class="text-2xl font-semibold mb-6 text-white">自定义内容</h2>
        
        <div class="space-y-4">
          <div>
            <label class="text-white font-medium mb-2 block">HTML 内容</label>
            <textarea
              v-model="customHTML"
              rows="8"
              placeholder="输入自定义 HTML 内容..."
              class="w-full bg-gray-800 text-white px-4 py-3 rounded-lg border border-gray-700 focus:border-tech-accent outline-none font-mono text-sm"
            ></textarea>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label class="text-white font-medium mb-2 block">窗口宽度</label>
              <input
                v-model.number="customSize.width"
                type="number"
                min="200"
                max="1920"
                class="w-full bg-gray-800 text-white px-4 py-3 rounded-lg border border-gray-700 focus:border-tech-accent outline-none"
              >
            </div>

            <div>
              <label class="text-white font-medium mb-2 block">窗口高度</label>
              <input
                v-model.number="customSize.height"
                type="number"
                min="200"
                max="1080"
                class="w-full bg-gray-800 text-white px-4 py-3 rounded-lg border border-gray-700 focus:border-tech-accent outline-none"
              >
            </div>
          </div>

          <button
            @click="openPiP('custom')"
            :disabled="!isSupported || !!pipWindow || !customHTML"
            class="tech-button disabled:opacity-50 disabled:cursor-not-allowed"
          >
            <i class="i-carbon-launch mr-2"></i>
            打开自定义内容
          </button>
        </div>
      </div>

      <!-- 事件日志 -->
      <div v-if="logs.length > 0" class="tech-card mb-8">
        <div class="flex justify-between items-center mb-6">
          <h2 class="text-2xl font-semibold text-white">事件日志</h2>
          <button
            @click="clearLogs"
            class="text-red-400 hover:text-red-300 text-sm"
          >
            <i class="i-carbon-clean mr-1"></i>
            清空日志
          </button>
        </div>

        <div class="space-y-2 max-h-64 overflow-y-auto">
          <div
            v-for="(log, index) in logs.slice().reverse()"
            :key="index"
            class="bg-gray-800 rounded-lg p-3 flex items-start text-sm"
          >
            <i
              :class="getLogIcon(log.type)"
              class="text-lg mr-3 mt-0.5"
            ></i>
            <div class="flex-1">
              <div class="text-white">{{ log.message }}</div>
              <div class="text-gray-400 text-xs mt-1">{{ log.timestamp }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- API 信息 -->
      <div class="tech-card">
        <h3 class="text-xl font-semibold mb-4 text-white">API 信息</h3>
        <div class="space-y-4 text-gray-300">
          <div>
            <h4 class="font-semibold text-tech-accent mb-2">浏览器支持</h4>
            <p>Chrome 116+ (需要启用实验性功能)</p>
          </div>
          <div>
            <h4 class="font-semibold text-tech-accent mb-2">主要方法</h4>
            <ul class="list-disc list-inside space-y-1">
              <li><code class="bg-gray-800 px-2 py-1 rounded">documentPictureInPicture.requestWindow()</code> - 请求 PiP 窗口</li>
              <li><code class="bg-gray-800 px-2 py-1 rounded">window.close()</code> - 关闭 PiP 窗口</li>
              <li><code class="bg-gray-800 px-2 py-1 rounded">documentPictureInPicture.window</code> - 获取当前 PiP 窗口</li>
            </ul>
          </div>
          <div>
            <h4 class="font-semibold text-tech-accent mb-2">事件</h4>
            <ul class="list-disc list-inside space-y-1">
              <li><code class="bg-gray-800 px-2 py-1 rounded">enter</code> - 进入画中画模式</li>
            </ul>
          </div>
          <div>
            <h4 class="font-semibold text-tech-accent mb-2">使用场景</h4>
            <ul class="list-disc list-inside space-y-1">
              <li>视频播放器控制面板</li>
              <li>音乐播放器迷你窗口</li>
              <li>视频会议浮动窗口</li>
              <li>实时数据监控面板</li>
              <li>笔记和待办事项</li>
              <li>计算器等工具应用</li>
              <li>聊天和通知窗口</li>
            </ul>
          </div>
          <div>
            <h4 class="font-semibold text-tech-accent mb-2">与传统 PiP 的区别</h4>
            <p class="text-sm leading-relaxed">
              传统的 Picture-in-Picture API 只能显示 <code class="bg-gray-800 px-1 rounded">&lt;video&gt;</code> 元素，
              而 Document Picture-in-Picture API 可以显示任意 HTML 内容，
              包括整个 DOM 树、CSS 样式、JavaScript 交互等。
              这使得开发者可以创建功能完整的浮动应用界面。
            </p>
          </div>
          <div>
            <h4 class="font-semibold text-tech-accent mb-2">特点</h4>
            <ul class="list-disc list-inside space-y-1 text-sm">
              <li>✅ 始终置顶显示</li>
              <li>✅ 支持完整的 HTML/CSS/JavaScript</li>
              <li>✅ 可以与主窗口交互</li>
              <li>✅ 支持样式继承和自定义</li>
              <li>✅ 用户可以调整窗口大小和位置</li>
              <li>⚠️ 同一时间只能有一个 PiP 窗口</li>
            </ul>
          </div>
          <div>
            <h4 class="font-semibold text-tech-accent mb-2">安全和隐私</h4>
            <ul class="list-disc list-inside space-y-1 text-sm">
              <li>需要用户手势触发（如点击按钮）</li>
              <li>用户可以随时关闭 PiP 窗口</li>
              <li>浏览器会显示明确的 PiP 指示</li>
              <li>不能用于显示第三方内容（防止钓鱼）</li>
            </ul>
          </div>
          <div>
            <h4 class="font-semibold text-tech-accent mb-2">最佳实践</h4>
            <ul class="list-disc list-inside space-y-1 text-sm">
              <li>监听窗口关闭事件，及时清理资源</li>
              <li>复制必要的样式到 PiP 窗口</li>
              <li>保持 PiP 窗口内容简洁</li>
              <li>提供明确的关闭按钮</li>
              <li>处理窗口大小变化</li>
            </ul>
          </div>
          <div>
            <h4 class="font-semibold text-tech-accent mb-2">注意事项</h4>
            <p class="text-sm text-yellow-400">
              ⚠️ 这是一个非常新的实验性 API，目前只有 Chrome 116+ 支持，
              且可能需要启用实验性功能标志。API 规范可能会变化。
              在生产环境使用前请充分测试并提供降级方案。
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onUnmounted } from 'vue'

// 类型定义
interface Log {
  type: 'info' | 'success' | 'warning' | 'error'
  message: string
  timestamp: string
}

// 响应式状态
const isSupported = ref('documentPictureInPicture' in window)
const pipWindow = ref<Window | null>(null)
const windowSize = ref({ width: 0, height: 0 })
const activeTime = ref(0)
const logs = ref<Log[]>([])

// 自定义内容
const customHTML = ref(`<div style="padding: 40px; text-align: center; font-family: Arial, sans-serif;">
  <h1 style="color: #0ea5e9; margin-bottom: 20px;">自定义 PiP 窗口</h1>
  <p style="color: #666; margin-bottom: 20px;">这是一个自定义的画中画窗口内容</p>
  <button onclick="alert('按钮被点击了！')" style="background: #0ea5e9; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer;">
    点击我
  </button>
</div>`)

const customSize = ref({ width: 500, height: 400 })

let activeTimer: ReturnType<typeof setInterval> | null = null

// 清理
onUnmounted(() => {
  closePiP()
})

// 打开画中画窗口
const openPiP = async (template: string) => {
  if (!isSupported.value) {
    addLog('error', '浏览器不支持 Document Picture-in-Picture API')
    return
  }

  try {
    addLog('info', '正在打开画中画窗口...')

    // 获取内容和尺寸
    const { html, width, height } = getTemplateContent(template)

    // 请求画中画窗口
    const pip = await (window as any).documentPictureInPicture.requestWindow({
      width,
      height
    })

    pipWindow.value = pip
    windowSize.value = { width: pip.innerWidth, height: pip.innerHeight }

    // 复制样式
    copyStyles(pip)

    // 设置内容
    pip.document.body.innerHTML = html

    // 监听关闭事件
    pip.addEventListener('pagehide', handlePiPClose)

    // 监听大小变化
    pip.addEventListener('resize', () => {
      windowSize.value = { width: pip.innerWidth, height: pip.innerHeight }
    })

    // 开始计时
    startTimer()

    addLog('success', `画中画窗口已打开 (${width}x${height})`)

  } catch (err) {
    console.error('打开画中画窗口失败:', err)
    addLog('error', `打开失败: ${err instanceof Error ? err.message : '未知错误'}`)
  }
}

// 获取模板内容
const getTemplateContent = (template: string): { html: string; width: number; height: number } => {
  const templates: Record<string, { html: string; width: number; height: number }> = {
    default: {
      html: `
        <div style="padding: 40px; text-align: center; font-family: Arial, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; height: 100vh; display: flex; flex-direction: column; justify-content: center;">
          <h1 style="margin-bottom: 20px; font-size: 2em;">画中画窗口</h1>
          <p style="margin-bottom: 30px; opacity: 0.9;">这是一个 Document PiP 演示</p>
          <button onclick="window.close()" style="background: white; color: #667eea; border: none; padding: 12px 30px; border-radius: 25px; cursor: pointer; font-size: 16px; font-weight: bold;">关闭窗口</button>
        </div>
      `,
      width: 400,
      height: 300
    },
    video: {
      html: `
        <div style="padding: 20px; font-family: Arial, sans-serif; background: #1f2937; color: white; height: 100vh; display: flex; flex-direction: column;">
          <h2 style="margin-bottom: 20px; color: #60a5fa;">视频播放器</h2>
          <div style="flex: 1; background: #000; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; border-radius: 8px;">
            <i style="font-size: 60px;">▶️</i>
          </div>
          <div style="display: flex; gap: 10px; justify-content: center;">
            <button style="background: #60a5fa; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer;">播放</button>
            <button style="background: #ef4444; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer;">暂停</button>
            <button onclick="window.close()" style="background: #6b7280; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer;">关闭</button>
          </div>
        </div>
      `,
      width: 500,
      height: 400
    },
    music: {
      html: `
        <div style="padding: 30px; font-family: Arial, sans-serif; background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center;">
          <div style="font-size: 60px; margin-bottom: 20px;">🎵</div>
          <h3 style="margin-bottom: 10px;">正在播放</h3>
          <p style="margin-bottom: 30px; opacity: 0.9;">未知曲目</p>
          <div style="display: flex; gap: 15px;">
            <button style="background: white; color: #10b981; border: none; padding: 12px; border-radius: 50%; cursor: pointer; width: 50px; height: 50px; font-size: 20px;">⏮</button>
            <button style="background: white; color: #10b981; border: none; padding: 12px; border-radius: 50%; cursor: pointer; width: 50px; height: 50px; font-size: 20px;">▶️</button>
            <button style="background: white; color: #10b981; border: none; padding: 12px; border-radius: 50%; cursor: pointer; width: 50px; height: 50px; font-size: 20px;">⏭</button>
          </div>
          <button onclick="window.close()" style="margin-top: 30px; background: rgba(255,255,255,0.2); color: white; border: none; padding: 8px 20px; border-radius: 20px; cursor: pointer;">关闭</button>
        </div>
      `,
      width: 350,
      height: 450
    },
    timer: {
      html: `
        <div style="padding: 40px; font-family: Arial, sans-serif; background: linear-gradient(135deg, #f59e0b 0%, #dc2626 100%); color: white; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center;">
          <h2 style="margin-bottom: 30px;">倒计时器</h2>
          <div id="timer" style="font-size: 72px; font-weight: bold; margin-bottom: 40px;">05:00</div>
          <div style="display: flex; gap: 15px;">
            <button style="background: white; color: #f59e0b; border: none; padding: 12px 24px; border-radius: 5px; cursor: pointer; font-weight: bold;">开始</button>
            <button style="background: rgba(255,255,255,0.3); color: white; border: none; padding: 12px 24px; border-radius: 5px; cursor: pointer; font-weight: bold;">重置</button>
          </div>
          <button onclick="window.close()" style="margin-top: 30px; background: rgba(255,255,255,0.2); color: white; border: none; padding: 8px 20px; border-radius: 20px; cursor: pointer;">关闭</button>
        </div>
      `,
      width: 400,
      height: 500
    },
    notes: {
      html: `
        <div style="padding: 20px; font-family: Arial, sans-serif; background: #fef3c7; height: 100vh; display: flex; flex-direction: column;">
          <h3 style="color: #92400e; margin-bottom: 15px;">📝 便签</h3>
          <textarea style="flex: 1; border: 2px solid #fbbf24; border-radius: 8px; padding: 15px; font-size: 16px; resize: none; background: #fffbeb;" placeholder="在这里记录笔记..."></textarea>
          <button onclick="window.close()" style="margin-top: 15px; background: #fbbf24; color: #92400e; border: none; padding: 10px; border-radius: 5px; cursor: pointer; font-weight: bold;">关闭</button>
        </div>
      `,
      width: 400,
      height: 500
    },
    calculator: {
      html: `
        <div style="padding: 20px; font-family: Arial, sans-serif; background: #1f2937; height: 100vh; display: flex; flex-direction: column;">
          <div style="background: #111827; padding: 20px; margin-bottom: 15px; text-align: right; font-size: 32px; color: white; border-radius: 8px;">0</div>
          <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; flex: 1;">
            ${['7', '8', '9', '÷', '4', '5', '6', '×', '1', '2', '3', '-', '0', '.', '=', '+'].map(btn => 
              `<button style="background: ${btn === '=' ? '#10b981' : '#374151'}; color: white; border: none; border-radius: 8px; font-size: 24px; cursor: pointer;">${btn}</button>`
            ).join('')}
          </div>
          <button onclick="window.close()" style="margin-top: 15px; background: #6b7280; color: white; border: none; padding: 10px; border-radius: 5px; cursor: pointer;">关闭</button>
        </div>
      `,
      width: 350,
      height: 550
    },
    chat: {
      html: `
        <div style="padding: 20px; font-family: Arial, sans-serif; background: #f3f4f6; height: 100vh; display: flex; flex-direction: column;">
          <h3 style="color: #1f2937; margin-bottom: 15px;">💬 聊天窗口</h3>
          <div style="flex: 1; background: white; border: 1px solid #e5e7eb; border-radius: 8px; padding: 15px; overflow-y: auto; margin-bottom: 15px;">
            <div style="background: #dbeafe; padding: 10px; border-radius: 8px; margin-bottom: 10px;">你好！</div>
            <div style="background: #e0e7ff; padding: 10px; border-radius: 8px; text-align: right;">嗨，有什么可以帮你的？</div>
          </div>
          <div style="display: flex; gap: 10px;">
            <input type="text" placeholder="输入消息..." style="flex: 1; border: 1px solid #e5e7eb; border-radius: 5px; padding: 10px;">
            <button style="background: #3b82f6; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer;">发送</button>
          </div>
          <button onclick="window.close()" style="margin-top: 15px; background: #6b7280; color: white; border: none; padding: 8px; border-radius: 5px; cursor: pointer;">关闭</button>
        </div>
      `,
      width: 400,
      height: 600
    },
    custom: {
      html: customHTML.value,
      width: customSize.value.width,
      height: customSize.value.height
    }
  }

  return templates[template] || templates.default
}

// 复制样式
const copyStyles = (pipWindow: Window) => {
  try {
    // 复制当前页面的样式表
    const styleSheets = Array.from(document.styleSheets)
    styleSheets.forEach(sheet => {
      try {
        const cssText = Array.from(sheet.cssRules)
          .map(rule => rule.cssText)
          .join('\n')
        
        const style = pipWindow.document.createElement('style')
        style.textContent = cssText
        pipWindow.document.head.appendChild(style)
      } catch (err) {
        // 跨域样式表可能无法访问
        console.warn('无法复制样式表:', err)
      }
    })
  } catch (err) {
    console.error('复制样式失败:', err)
  }
}

// 处理窗口关闭
const handlePiPClose = () => {
  addLog('info', '画中画窗口已关闭')
  pipWindow.value = null
  windowSize.value = { width: 0, height: 0 }
  stopTimer()
}

// 关闭画中画窗口
const closePiP = () => {
  if (pipWindow.value) {
    pipWindow.value.close()
    pipWindow.value = null
    windowSize.value = { width: 0, height: 0 }
    stopTimer()
    addLog('success', '画中画窗口已关闭')
  }
}

// 开始计时
const startTimer = () => {
  activeTime.value = 0
  activeTimer = setInterval(() => {
    activeTime.value++
  }, 1000)
}

// 停止计时
const stopTimer = () => {
  if (activeTimer) {
    clearInterval(activeTimer)
    activeTimer = null
  }
  activeTime.value = 0
}

// 添加日志
const addLog = (type: 'info' | 'success' | 'warning' | 'error', message: string) => {
  logs.value.push({
    type,
    message,
    timestamp: new Date().toLocaleTimeString('zh-CN')
  })

  // 只保留最近 50 条
  if (logs.value.length > 50) {
    logs.value.shift()
  }
}

// 清空日志
const clearLogs = () => {
  logs.value = []
}

// 获取日志图标
const getLogIcon = (type: string) => {
  const icons = {
    info: 'i-carbon-information-filled text-blue-400',
    success: 'i-carbon-checkmark-filled text-green-400',
    warning: 'i-carbon-warning-filled text-yellow-400',
    error: 'i-carbon-error-filled text-red-400'
  }
  return icons[type as keyof typeof icons]
}
</script>

